
<template>
  <div class="AdviceProcess">
    <div class="list">
      <div class="item" v-for="item in data" :key="item.s">
        <div class="left">
          <div> {{ item.updateDate.split(' ')[0] }} </div>
          <div> {{ item.updateDate.split(' ')[1] }} </div>
        </div>
        <div class="center">
          <div class="icon"></div>
        </div>
        <div class="right">
          <div class="bold"> {{ item.statusName }} </div>
          <div> 操作人：{{ item.work }} </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data () {
    return {
      data: [],
    }
  },
  onLoad (option) {
    this.id = option.id
    this.getData()
  },
  methods: {
    async getData () {
      const { result } = await api.getAdviceProcess({ id: this.id })
      this.data = result
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.AdviceProcess {
	min-height: 100vh;
	padding: 20px 15px;
	background: #fff;

	.list {
		padding: 10px 25px;

		.item {
			display: flex;
			align-items: stretch;
			height: 100px;

			.left,
			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				max-width: 130px;
				line-height: 20px;
				font-size: $fz-m;
				color: #999;

				.bold {
					margin-bottom: 5px;
					font-weight: bold;
					font-size: $fz-l;
					color: #333;
				}
			}

			.left {
				align-items: center;
			}

			.center {
				display: flex;
				position: relative;
				justify-content: center;
				align-items: center;
				margin: 0 18px;

				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 12px;
					height: 12px;
					border: 1px solid #d1272f;
					border-radius: 50%;
					background: #fff;

					&::after {
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background: #d1272f;
						content: '';
					}
				}
			}

			&:not(:first-child) {
				.center {
					&::before {
						position: absolute;
						left: 50%;
						bottom: calc(50% + 6px);
						width: 1px;
						height: 50%;
						background: #999;
						content: '';
						transform: translateX(-50%);
					}
				}
			}

			&:not(:last-child) {
				.center {
					&::after {
						position: absolute;
						left: 50%;
						top: calc(50% + 6px);
						width: 1px;
						height: 50%;
						background: #999;
						content: '';
						transform: translateX(-50%);
					}
				}
			}
		}
	}
}
</style>
